<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      class="addVideo"
    >
      <el-form-item label="标题">
        <el-input
          v-model="form.share_title"
          class="inputMedia"
          maxlength="30"
          clearable
          placeholder="请输入标题"
          style="width:80%;"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <upload
          tip="建议图片比例 1:1，图片大小不能超过2MB，分辨率不能
        超过1080*1080，支持jpg、jpeg、png格式"
          type="link"
          :url="form.share_image"
          @resultUpload="resultUpload"
        />
      </el-form-item>
    </el-form>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        @click="submit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import upload from '@/common/component/upload.vue'
import { miniAppShare } from '@/api/miniApp'
export default {
  components: {
    upload
  },
  props: ['rowInfo'],
  data() {
    return {
      loading: false,
      form: {
        share_title: '',
        share_image: '',
        share_id: '',
        mini_app_id: ''
      }
    }
  },
  mounted() {
    if (this.rowInfo) {
      this.form = {
        share_title: this.rowInfo.share_title || '',
        share_image: this.rowInfo.share_image || '',
        share_id: this.rowInfo.share_id || '',
        mini_app_id: this.rowInfo.id || ''
      }
    }
  },
  methods: {
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.loading = true
      miniAppShare(this.form).then((res) => {
        if (res.status_code === 1) {
          this.close()
          this.$emit('ok')
        }
        this.loading = false
      })
    },
    resultUpload(value) {
      this.form.share_image = value
    }
  }
}
</script>

<style lang="scss" scoped>
.addVideo {
  width: 400px;
  padding-top: 40px;
}
</style>